前言

本编主要讲常用布局 两列布局，两列布局有两种，一是左边固定右边自适应，另一种是右边固定，左边自适应。只讲我认为最优的方案

左侧固定

演示

      <div class="main">main</div>
      <div class="slide">slide</div>

      .slide {
        float: left;
        width: 100px;
        margin-left: -100%;
      }
      .main {
        float: left;
        padding-left: 100px;
        box-sizing: border-box;
        width: 100%;
       
      }

右侧固定

演示

      <div class="main">main</div>
      <div class="slide">slide</div>

      .slide {
        float: left;
        width: 100px;
        margin-left: -100%;
      }
      .main {
        float: left;
        padding-left: 100px;
        box-sizing: border-box;
        width: 100%;
       
      }

flex

这个方案最简单，也最容易理解使用 order + flex 属性即可

table

使用table也行， 兼容性高于flex。
父：display: table;
子：display: table-cell;

绝对定位

比较简单容易理解

  .slide {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
  }
  .main {
    margin-left: 200px;
  }

float + margin

.slide {
  float: left;
  width: 200px;
}
.main {
  margin-left: 200px;
}